<template>
    <div>
        <x-header :left-options="{backText: ''}" >账单查询</x-header>
        <div class="tab">
            <button-tab>
                <button-tab-item selected @on-item-click="consoleIndex(1)">已出账单</button-tab-item>
                <button-tab-item @on-item-click="consoleIndex(2)">未出账单</button-tab-item>
            </button-tab>
        </div>
        <!-- 切换模板中的内容部分容器 -->

        <!-- 已出账单 -->
        <div class="tab_con" v-show="tabIndex == 1">
            <!-- 下拉选择款 -->
            <group label-width="1.5rem" label-margin-right="1px">
                <popup-picker 
                    popup-title="信用卡号" 
                    title="信用卡号" 
                    value-text-align="left" 
                    :data="list1" 
                    v-model="value1_1" 
                    @on-show="onShow" 
                    @on-hide="onHide" 
                    @on-change="onChange">
                </popup-picker>
                
                <datetime title="选择期次" v-model="date"></datetime>
            </group>
            <!-- 我要还款模块 -->
            <div class="need_refund">
                <ul class="list">
                    <li>
                        <label>交易日期:</label>
                        <span class="val">0326</span>
                    </li>
                    <li>
                        <label>到期还款日:</label>
                        <span class="val">2018-05-23</span>
                    </li>
                    <li>
                        <label>本期账单金额:</label>
                        <span class="num_val">0.00</span>
                    </li>
                    <li>
                        <label>最低还款金额:</label>
                        <span class="num_val">0.00</span>
                    </li>
                    <li>
                        <label>预借现金额度:</label>
                        <span class="num_val">8500.00</span>
                    </li>
                    <li>
                        <label>上期账单金额:</label>
                        <span class="num_val">2589.00</span>
                    </li>
                    <li>
                        <label>上期还款金额:</label>
                        <span class="num_val">693.00</span>
                    </li>
                    <li>
                        <label>本期使用金额:</label>
                        <span class="num_val">122.78</span>
                    </li>
                    <li>
                        <label>本期调整金额:</label>
                        <span class="num_val">-452.00</span>
                    </li>
                    <li>
                        <label>循环利息:</label>
                        <span class="num_val">0.00</span>
                    </li>
                </ul>
                <div class="list_foot">
                    我要还款
                </div>
            </div>

            <!-- 交易流水 -->
            <div class="need_refund trade_info">
                <ul class="list">
                    <li v-for="item in tradeArr">
                        <label>{{item.key}}:</label>
                        <span class="val">{{item.value}}</span>
                    </li>
                </ul>
            </div>

        </div>
        <!-- 未出账单 -->
        <div class="tab_con" v-show="tabIndex == 2">
            <!-- 下拉选择款 -->
            <group label-width="1.5rem" label-margin-right="1px">
                <popup-picker 
                    popup-title="信用卡号" 
                    title="信用卡号" 
                    value-text-align="left" 
                    :data="list1" 
                    v-model="value1_1" 
                    @on-show="onShow" 
                    @on-hide="onHide" 
                    @on-change="onChange">
                </popup-picker>
            </group>
            <div class="need_refund">
                <ul class="list">
                    <li v-for="item in tradeArr">
                        <label>{{item.key}}:</label>
                        <span class="val">{{item.value}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    import { ButtonTab, ButtonTabItem, Divider,Group,PopupPicker,Datetime } from 'vux';
    export default {
        components: {
            ButtonTab,
            ButtonTabItem,
            Divider,
            Group,
            PopupPicker,
            Datetime
        },
        data(){
            return{
                date: '',
                tabIndex: 1,//控制tab切换不同的模板，默认是买入规则下标：1                
                value1_1: ['6234 **** **** ***6 345'],
                list1: [['6234 **** **** ***6 345', '6234 **** ***6 345', '6234 **** **** ***6 345', '6234 **** **** ***6 345', '6234 **** **** ***6 345', '6234 **** **** ***6 345']],
                tradeArr: [
                    {
                        value: '0326',
                        key: '交易日期'
                    },
                    {
                        value: '2018-05-23',
                        key: '入账日期'
                    },
                    {
                        value: '14256688',
                        key: '消费时间'
                    },
                    {
                        value: '586258',
                        key: '交易流水'
                    },
                    {
                        value: '支付宝网络技术公司',
                        key: '交易摘要'
                    },
                    {
                        value: '-666.00',
                        key: '交易金额'
                    },
                    {
                        value: '5882',
                        key: '卡号末四位'
                    },
                ]
            }
        },
        methods: {
            
            onShow () {},
            onHide (type) {},
            onChange (val) {},
            consoleIndex(index) {
                this.tabIndex = index;
            }
        },        
        watch: {
            'value1_1': function (val) {
            console.log(val)
            }
        }
    }
</script>
<style lang="less" scoped>
    .tab {
        height: 1.09rem;
        width: 100%;
        padding: .20rem .32rem;
        border-top: 1px solid #c9c9c9;
    }
    .tab_con {
        // border: 1px solid red;
        .need_refund {
            margin-top: .36rem;
            border-radius: .2rem;
            padding-top: .2rem;
            padding-left: .33rem;
            padding-right: .33rem;
            background: #fff;
            .list {
                li {
                    line-height: .60rem;
                    label,span {
                        display: inline-block;
                        width: 2.70rem;
                        font-size: .28rem;
                    }
                    label {
                        color: #999;
                    }
                    .val {
                        color: #333;
                    }
                    .num_val {
                        color: #eeaa5f;
                    }
                    .trade_money {
                        color: #549ce5;
                    }
                }
            }
            .list_foot {
                height: .88rem;
                line-height: .88rem;
                text-align: right;
                padding-right: .32rem;
                color: #549ce5;
            }
        }
        .trade_info {
            margin-top: .16rem;
            .list {
                border-bottom: 1px solid #eee;
                .list {
                    border-bottom: 0px solid #eee;
                }
            }
        }
    }
</style>
<style scoped>
/deep/ .weui-cell_access .weui-cell__ft:after {
    content: " ";
    border-color: #549ce5;
    transform: rotate(135deg);
}
/deep/ .vux-cell-value {
    color: #549ce5;
}

/deep/ .vux-popup-header-right {
    color: #549ce5;
}
/deep/ .weui-cell__ft {
    text-align: left;
}
/deep/ .dp-header .dp-item.dp-right{
    color: #549ce5;
}
/deep/ .vux-no-group-title {
    margin-top: 0rem;
    border-radius: .2rem;
}
/deep/ .vux-header {
    background-color: #fff;
}
/deep/ .vux-header .vux-header-left .left-arrow:before {
    border: 1px solid #549ce5;
    border-width: 1px 0 0 1px;
}
/deep/ .vux-header .vux-header-title {
    color: #333;
}
/deep/ .vux-button-group > a.vux-button-tab-item-first:after {
    border: 1px solid #549ce5;
    color: #04BE02;
    height: 200%;
    transform-origin: left top;
    transform: scale(0.5);
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
}
/deep/ .vux-button-group > a.vux-button-tab-item-last:after {
    border-right: 1px solid #549ce5;
    border-top: 1px solid #549ce5;
    border-bottom: 1px solid #549ce5;
    border-left: none;
    color: #549ce5;
}
/deep/ .vux-button-group > a.vux-button-group-current {
    background: #549ce5;
}
/deep/ .vux-button-group > a {
    height: .66rem;
    line-height: .66rem;
    color: #333;
}
</style>